<template>
  <view style="padding-top: 20rpx; padding-bottom: 120rpx">
    <text style="padding-left: 20rpx; font-size: 26rpx">常用</text>
    <view class="tool">
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/send.png'"
          mode="widthFix"
        ></image>
        客户群发
      </view>
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/market.png'"
          mode="widthFix"
        ></image>
        销售机会
      </view>
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/follow.png'"
          mode="widthFix"
        ></image>
        跟进记录
      </view>
    </view>
    <text style="padding-left: 20rpx; font-size: 26rpx">营销</text>
    <view class="tool">
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/material.png'"
          mode="widthFix"
        ></image>
        营销素材
      </view>
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/visit.png'"
          mode="widthFix"
        ></image>
        百问百答
      </view>
    </view>
    <text style="padding-left: 20rpx; font-size: 26rpx">引流</text>
    <view class="tool">
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/annex-id-card.png'"
          mode="widthFix"
        ></image>
        我的名片
      </view>
    </view>

    <text style="padding-left: 20rpx; font-size: 26rpx">商城</text>
    <view class="tool">
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/shop.png'"
          mode="widthFix"
        ></image>
        私域商城
      </view>
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/s-shop.png'"
          mode="widthFix"
        ></image>
        员工小店
      </view>
    </view>

    <text style="padding-left: 20rpx; font-size: 26rpx">效率</text>
    <view class="tool">
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/shop.png'"
          mode="widthFix"
        ></image>
        跟进任务
      </view>
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/s-shop.png'"
          mode="widthFix"
        ></image>
        线下会议
      </view>
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/s-shop.png'"
          mode="widthFix"
        ></image>
        腾讯会议
      </view>
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/s-shop.png'"
          mode="widthFix"
        ></image>
        企微日程
      </view>
    </view>

    <text style="padding-left: 20rpx; font-size: 26rpx">风控</text>
    <view class="tool">
      <view class="box">
        <image
          style="width: 50rpx"
          class="slot-image"
          :src="'/static/icons/remind.png'"
          mode="widthFix"
        ></image>
        删人提醒
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
// 获取屏幕边界到安全区域距离

import { onMounted, ref } from 'vue'
// 接收页面参数
const query = defineProps<{
  from: string
  value: string
}>()
const open = ref(false)

const searchValue = ref<string>(query.value)
const handleQuery = async () => {
  if (searchValue.value) {
    let url = `/pages/goods/list?searchValue=${searchValue.value}`
    if (query.from === 'goods') {
      uni.redirectTo({
        url: url,
      })
    } else {
      uni.navigateTo({
        url: url,
      })
    }
    searchValue.value = ''
  }
}

// 组件挂载完毕
onMounted(() => {
  open.value = true
  console.log(searchValue.value)
})
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
}
.tool {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  .box {
    background-color: #ffffff;
    margin-left: 20rpx;
    width: 345rpx;
    margin-top: 20rpx;
    font-size: 24rpx;
    padding: 30rpx 20rpx;
    color: #3e3e3e;
  }
}
</style>
